<template>
  <div class="mainSelect">
    <!-- 查询功能模块 -->
    <div class="select">
      <el-form ref="form" :model="addEmployeeName" label-width="80px">
        <el-form-item label="姓名:">
          <el-input
            v-model="addEmployeeName.empName"
            style="width: 150px"
          ></el-input>
        </el-form-item>
        <el-form-item label="岗位:">
          <el-input
            v-model="addEmployeeName.empJob"
            style="width: 180px"
          ></el-input>
        </el-form-item>
        <el-form-item label="部门名称:">
          <el-input
            v-model="addEmployeeName.emDepartment"
            style="width: 180px"
          ></el-input>
        </el-form-item>
        <div style="width:400px,height:100px">
          <el-form-item>
            <el-button type="success" @click="selectEmployee">查询</el-button>
            <el-button type="success" @click="add" style="margin-right: 10px"
              >添加</el-button
            >
            <el-button type="primary" style="margin-left: 20px" @click="upload"
              >上传<i class="el-icon-upload el-icon--right"></i
            ></el-button>

            <el-button
              type="primary"
              style="margin-left: 20px"
              @click="download"
              >下载<i class="el-icon-download el-icon--right"></i>
            </el-button>
            <el-button
              type="primary"
              style="margin-left: 20px"
              v-print="'#querytable'"
              >打印<i class="el-icon-upload el-icon--right"></i
            ></el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <!-- 展示查询员工的信息 -->
    <TableTemplate
      :header="header"
      :tableData="tableData"
      :title="title"
      @editInfo="editInfo"
      @add="add"
      @deleteEmployee="deleteEmployee"
      id="querytable"
    />
    <Pagination
      :total="total"
      @getCurrentPage="getCurrentPage"
      @getPageSize="getPageSize"
    />
    <!-- 点击添加按钮，弹出添加员工信息的弹窗 -->
    <el-dialog
      :title="title"
      :visible.sync="centerAddDialogVisible"
      width="50%"
      center
    >
      <el-form :label-position="labelPosition" label-width="150px">
        <el-form-item
          :label="lable + ':'"
          v-for="(lable, prop, index) in adddialog"
          :key="index"
        >
          <el-input
            v-model="addEmployeeName[prop]"
            style="width: 200px"
          ></el-input>
        </el-form-item>
        <el-form-item class="dialog-inp" label="员工编号">
          <el-input v-model="addEmployeeName.empStaNum"></el-input>
        </el-form-item>
        <!-- <el-form-item label="入职日期:">
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" v-model="addEmployeeName.empHirDate" style="width: 100%">
            </el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="转正日期:">
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" v-model="addEmployeeName.empRegDate" style="width: 100%">
            </el-date-picker>
          </el-col>
        </el-form-item> -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerAddDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addEmployee">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 点击编辑按钮显示对应员工的信息 -->
    <el-dialog
      :title="title"
      :visible.sync="centerEditDialogVisible"
      width="50%"
      center
    >
      <el-form :label-position="labelPosition" label-width="150px">
        <el-form-item
          :label="lable + ':'"
          v-for="(lable, prop, index) in adddialog"
          :key="index"
        >
          <el-input
            v-model="editEmployeeName[prop]"
            style="width: 200px"
          ></el-input>
        </el-form-item>
        <el-form-item class="dialog-inp" label="员工编号">
          <el-input v-model="editEmployeeName.empStaNum"></el-input>
        </el-form-item>
        <!-- <el-form-item label="入职日期:">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="editEmployeeName.empHirDate"
              style="width: 100%"
            ></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="转正日期:">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="editEmployeeName.empRegDate"
              style="width: 100%"
            ></el-date-picker>
          </el-col>
        </el-form-item> -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerEditDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="showEditInfo">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="上传文件"
      :visible.sync="centerUploadDialogVisible"
      width="30%"
      center
    >
      <el-upload
        drag
        style="margin-left: 100px"
        class="upload-demo"
        ref="upload"
        accept=".xlsx, .xlsm, .xls"
        :auto-upload="false"
        action="#"
        :limit="1"
        :file-list="fileList"
        :on-change="handleChange"
        :on-exceed="handleExceed"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerUploadDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitUpload">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import data3 from "../json/dataTable3.json";
export default {
  name: "EmployeeSalay",
  mounted() {
    // 页面一加载就获取所有员工的信息
    // this.tableData = this.employee.slice(0, this.pageSize);
    this.selectEmployeeSalary();
  },
  data() {
    return {
      // employee: data3.data,
      // 每页有几条数据
      total: 0,
      tableData: [],
      pageSize: 4,
      currentPage: 1,
      centerUploadDialogVisible: false,
      fileList: [], //文件列表
      file: {},
      header: {
        empId: "序号/工号",
        emDepartment: "部门名称",
        empName: "姓名",
        empJob: "岗位",
        empIdCardNo: "身份证号",
        empHirDate: "入职日期",
        empRegDate: "转正日期",
        empBaseMon: "基本工资",
        empPerAssess: "绩效考核",
        empPostMon: "岗位补贴",
        empDedDfa: "缺勤扣款",
        empDedLd: "迟到扣款",
        empDedDfel: "早退扣款",
        empDedOth: "其他扣款",
        empResMon: "补发",
        empOverMon: "加班工资",
        empMealMon: "餐费补贴",
        empOverAddMon: "加班补贴",
        empExceMon: "优秀员工奖金",
        empBonus: "异动",
        empWorkMon: "应发工资",
        empPerProv: "个人社扣养老",
        empPerMc: "个人社扣医疗",
        empPerUp: "个人社扣失业",
        empPerTd: "个人社保合计扣款",
        empPerAccuMon: "个人公积金扣款",
        empTaxAfterMon: "税后扣款个人所得税",
        empGrantMon: "已发",
        empActuMon: "实发",
        empCompProv: "公司社扣养老",
        empCompMc: "公司社扣医疗",
        empCompMdi: "公司社扣大病险",
        empCompUp: "公司社扣失业",
        empCompIj: "公司社扣工伤",
        empCompSoci: "公司社保合计扣款",
        empCompAccuMon: "公积金单位承担部分",
        empTel: "电话",
        empSalCard: "工资卡号",
      },
      // 编辑
      adddialog: {
        empId: "序号/工号",
        emDepartment: "部门名称",
        empName: "姓名",
        empJob: "岗位",
        empIdCardNo: "身份证号",
        // empHirDate: "入职日期",
        // empRegDate: "转正日期",
        empBaseMon: "基本工资",
        empPerAssess: "绩效考核",
        empPostMon: "岗位补贴",
        empDedDfa: "缺勤扣款",
        empDedLd: "迟到扣款",
        empDedDfel: "早退扣款",
        empDedOth: "其他扣款",
        empResMon: "补发",
        empOverMon: "加班工资",
        empMealMon: "餐费补贴",
        empOverAddMon: "加班补贴",
        empExceMon: "优秀员工奖金",
        empBonus: "异动",
        empWorkMon: "应发工资",
        empPerProv: "个人社扣养老",
        empPerMc: "个人社扣医疗",
        empPerUp: "个人社扣失业",
        empPerTd: "个人社保合计扣款",
        empPerAccuMon: "个人公积金扣款",
        empTaxAfterMon: "税后扣款个人所得税",
        empGrantMon: "已发",
        empActuMon: "实发",
        empCompProv: "公司社扣养老",
        empCompMc: "公司社扣医疗",
        empCompMdi: "公司社扣大病险",
        empCompUp: "公司社扣失业",
        empCompIj: "公司社扣工伤",
        empCompSoci: "公司社保合计扣款",
        empCompAccuMon: "公积金单位承担部分",
        empTel: "电话",
        empSalCard: "工资卡号",
      },
      // 获取添加输入框里面的内容
      addEmployeeName: {
        empId: "",
        emDepartment: "",
        empName: "",
        empJob: "",
        empIdCardNo: "",
        empHirDate: "",
        empRegDate: "",
        empBaseMon: "",
        empPerAssess: "",
        empPostMon: "",
        empDedDfa: "",
        empDedId: "",
        empDedDfel: "",
        empDedOth: "",
        empResMon: "",
        empOverMon: "",
        empMealMon: "",
        empOverAddMon: "",
        empExceMon: "",
        empBonus: "",
        empWorkMon: "",
        empPerProv: "",
        empPerMc: "",
        empPerUp: "",
        empPerTd: "",
        empPerAccuMon: "",
        empTaxAfterMon: "",
        empGrantMon: "",
        empActuMon: "",
        empCompProv: "",
        empCompMc: "",
        empCompMdi: "",
        empCompUp: "",
        empCompIj: "",
        empCompSoci: "",
        empCompAccuMon: "",
        empTel: "",
        empSalCard: "",
        empStaNum: "",
      },
      // 存储编辑员工的信息
      editEmployeeName: {
        empId: "",
        emDepartment: "",
        empName: "",
        empJob: "",
        empIdCardNo: "",
        empHirDate: "",
        empRegDate: "",
        empBaseMon: "",
        empPerAssess: "",
        empPostMon: "",
        empDedDfa: "",
        empDedId: "",
        empDedDfel: "",
        empDedOth: "",
        empResMon: "",
        empOverMon: "",
        empMealMon: "",
        empOverAddMon: "",
        empExceMon: "",
        empBonus: "",
        empWorkMon: "",
        empPerProv: "",
        empPerMc: "",
        empPerUp: "",
        empPerTd: "",
        empPerAccuMon: "",
        empTaxAfterMon: "",
        empGrantMon: "",
        empActuMon: "",
        empCompProv: "",
        empCompMc: "",
        empCompMdi: "",
        empCompUp: "",
        empCompIj: "",
        empCompSoci: "",
        empCompAccuMon: "",
        empTel: "",
        empSalCard: "",
      },
      title: "添加员工薪资的信息",
      //控制添加弹窗的显示与隐藏，当点击添加按钮是值变为true
      centerAddDialogVisible: false,
      centerEditDialogVisible: false,
      labelPosition: "right",
    };
  },
  methods: {
    // 查询所有工资表
    selectEmployeeSalary() {
      this.$api.employeeSalary.getEmployeeSalaryList().then((res) => {
        console.log(res);
        let data = res.data.data;
        if (res.data.code == 200) {
          this.tableData = data.list.map((item) => {
            item.empCreateTime = item.empCreateTime.slice(0, 10);
            item.empRegDate = item.empRegDate.slice(0, 10);
            item.empUpdateTime = item.empUpdateTime.slice(0, 10);
            item.empHirDate = item.empHirDate.slice(0, 10);
            return item;
          });
          this.tableData = data.list;
          this.total = data.total;
        }
      });
    },
    // 分页查询请求数据
    selectPagination() {
      this.$api.employeeSalary
        .getEmployeeSalaryPage(this.currentPage, this.pageSize)
        .then((res) => {
          console.log(res);
          let data = res.data.data;
          if (res.data.code == 200) {
            this.tableData = data.list;
            this.total = data.total;
          }
        });
    },
    // getCurrentPage 获取分页组件中传递过来的当前页page
    getCurrentPage(currentPage, pageSize) {
      this.currentPage = currentPage;
      this.pageSize = pageSize;
      this.selectPagination();
    },
    // getPageSize   获取分页组件传递过来的每页显示多少条数据
    getPageSize(currentPage, pageSize) {
      this.currentPage = currentPage;
      this.pageSize = pageSize;
      this.selectPagination();
    },
    // 显示添加员工信息的表单
    add() {
      this.centerAddDialogVisible = true;
    },
    // 点击编辑按钮显示编辑的信息
    editInfo(data) {
      this.centerEditDialogVisible = true;
      this.editEmployeeName = data;
      console.log(this.editEmployeeName);
    },
    //点击删除按钮删除员工信息
    deleteEmployee(data) {
      console.log(data);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$api.employeeSalary
            .delEmployeeInfo(data.empStaNum)
            .then((res) => {
              console.log(res);
              if (res.data.code == 200) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
              } else {
                this.$message({
                  type: "error",
                  message: "删除失败",
                });
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 添加该名员工的信息，发生Ajax请求
    addEmployee() {
      this.centerAddDialogVisible = false;
      this.$api.employeeSalary.addMoney(this.addEmployeeName).then((res) => {
        // console.log(res);
        if (res.data.code == 200) {
          this.$message({
            type: "success",
            message: res.data.msg,
          });
        } else if (res.data.code == 408) {
          this.$message({
            type: "error",
            message: res.data.msg,
          });
        } else if (res.data.code == 430) {
          this.$message({
            type: "error",
            message: res.data.msg,
          });
        } else if (res.data.code == 410) {
          this.$message({
            type: "error",
            message: res.data.msg,
          });
        } else if (res.data.code == 409) {
          this.$message({
            type: "error",
            message: res.data.msg,
          });
        }
        this.selectPagination();
      });
    },
    // 编辑完员工的信息后，发生请求
    showEditInfo() {
      this.centerEditDialogVisible = false;
      this.$api.employeeSalary
        .changeEmployeeInfo(this.editEmployeeName)
        .then((res) => {
          console.log(res);
          let data = res.data.data;
          if (res.data.code == 200) {
            this.tableData = data.list;
          }
        });
    },
    // 上传
    upload() {
      this.centerUploadDialogVisible = true;
    },
    download() {
      this.$api.employeeSalary.download().then((res) => {
        console.log(res);
        const fileName = "one.xls";
        const elink = document.createElement("a");
        if ("download" in elink) {
          elink.download = fileName;
          elink.style.display = "none";
          elink.href = window.URL.createObjectURL(res.data);
          document.body.appendChild(elink);
          elink.click();
          window.URL.revokeObjectURL(elink.href);
          document.body.removeChild(elink);
        } else {
          navigator.msSaveBlob(blob, fileName);
        }
      });
    },
    submitUpload() {
      if (!this.file.size) {
        this.$message.warning("请选择上传的文件");
        return;
      }
      // this.uploading = true;
      let formData = new FormData();
      formData.append("file", this.file.raw);
      this.$api.employeeSalary.reqUpFile(formData).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          this.$message({
            type: "success",
            message: res.data.msg,
          });
        } else {
          this.$message({
            type: "error",
            message: "上传失败,请重新上传!",
          });
        }
        this.selectPagination();
      });
      this.centerUploadDialogVisible = false;
    },
    // 接收子组件传递过来的数据
    updateTableData(tableData) {
      this.tableData = tableData;
    },
    selectEmployee() {
      this.$api.employeeSalary.getEmployeeSalaryListBy(this.addEmployeeName.empName,this.addEmployeeName.empJob,this.addEmployeeName.emDepartment)
    },
    //文件状态改变触发
    handleChange(file) {
      //(file,fileList)参数
      this.uploading = false;
      this.file = file;
    },
    //文件超出个数限制
    handleExceed() {
      this.$message.warning("仅允许上传一个文件！");
    },
    // submitUpload() {
    //   if (!this.file.size) {
    //     this.$message.warning("请选择上传的文件");
    //     return;
    //   }
    //   // this.uploading = true;
    //   let formData = new FormData();
    //   formData.append("file", this.file.raw);
    //   this.$api.employeeRosterInfo
    //     .uploadEmployeeRosterFile(formData)
    //     .then((res) => {
    //       console.log(res);
    //       if (res.data.code == 200) {
    //         this.$message({
    //           type: "success",
    //           message: res.data.msg,
    //         });
    //       } else {
    //         this.$message({
    //           type: "error",
    //           message: "上传失败,请重新上传!",
    //         });
    //       }
    //       this.selectPagination();
    //     });
    //   this.centerUploadDialogVisible = false;
    // },
  },
};
</script>

<style scoped lang="less">
.select {
  .el-form {
    display: flex;
    flex-wrap: wrap;

    .el-form-item {
      flex: 1;
    }

    .el-form-item:nth-child(4) {
      flex: 3;
    }
  }
}

.el-input {
  width: 85px;
  height: 10px;
  margin-left: 10px;
  margin-right: 10px;
}

.el-dialog {
  transform: translate(-50%, 50%);

  .el-form {
    display: flex;
    flex-wrap: wrap;
    padding-right: 40px;

    .el-form-item {
      flex: 50%;
    }
  }
}
</style>
